<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教师管理</title>
</head>

<link rel="shortcut icon" href="../../static/favicon.ico"
      th:href="@{/static/favicon.ico}">
<link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
      th:href="@{/static/css/bootstrap.min.css(v=3.3.6) }">
<link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"
      th:href="@{/static/css/font-awesome.css(v=4.4.0) }">
<link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"
      th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css }">
<link href="../../static/css/animate.css" rel="stylesheet"
      th:href="@{/static/css/animate.css }">
<link href="../../static/css/style.css?v=4.1.0" rel="stylesheet"
      th:href="@{/static/css/style.css(v=4.1.0) }">
<!--树形控件-->
<link href="../../static/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
      th:href="@{/static/css/plugins/treeview/bootstrap-treeview.css}">
<!-- 弹出框插件 -->
<link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"
      th:href="@{/static/css/plugins/sweetalert/sweetalert.css }">
<!--时间控件-->
<link href="../../static/public/user/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
      th:href="@{/static/public/user/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}"
      rel="stylesheet">
<!--滑动按钮-->
<link href="../../static/css/plugins/switchery/switchery.css"
      th:href="@{/static/css/plugins/switchery/switchery.css}" rel="stylesheet">

<style type="text/css">
    .table > thead > tr > th {
        color: #2a62bc;
    }

    .form-inline > .btn:not(.query) {
        margin-left: 0.8%;
        float: right;
    }
</style>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-title">
        <div class="row row-lg">
            <div class="col-sm-12">
                <form class="form-inline" id="admin_query">
                    <div class="form-group">
                        <label for="exampleInputUserName">用户名:</label>
                        <input type="text" name="userName" class="form-control" id="exampleInputUserName">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputName">姓名:</label>
                        <input type="text" name="realName" class="form-control" id="exampleInputName">
                    </div>
                    <button class="btn btn-success query" type="button">查询</button>
                    <button class="btn btn-danger deleteAll" type="button">删除</button>
                    <button class="btn btn-info" type="button" data-toggle='modal' data-target='#modal_add'>添加</button>
                    <button class="btn btn-primary export" type="button">导出</button>
                </form>
                <table id="tb_departments"></table>
            </div>

        </div>
    </div>
</div>


<!--添加 模窗-->
<div class="modal  fade" id="modal_add" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">添加管理</h4>
            </div>
            <div class="modal-body">
                <form method="post" th:action="@{/user/adminList/addAdmin}"  class="form-horizontal" id="form_add">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            用户名</label>
                        <div class="col-sm-8">
                            <input type="text" id="add_userName" name="userName" class="form-control" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            密码</label>
                        <div class="col-sm-8">
                            <input type="password" id="add_userPwd" name="userPwd" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            姓名</label>
                        <div class="col-sm-8">
                            <input type="text" id="add_realName" name="realName" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            性别</label>
                        <div class="col-sm-8">
                            <label class="control-label">
                                <input type="radio" checked="checked" value="1"  name="add_gender">
                                <span>男</span>
                            </label>&nbsp;&nbsp;
                            <label class="control-label">
                                <input type="radio" value="0"  name="add_gender">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            手机</label>
                        <div class="col-sm-8">
                            <input type="text" id="add_userPhone" name="userPhone" class="form-control" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            邮箱</label>
                        <div class="col-sm-8">
                            <input type="email" id="add_userEmail" name="userEmail" class="form-control" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            有效期</label>
                        <div class="col-sm-8">
                            <input type="text" id="add_effectiveDate" name="effectiveDate" class="form-control myData_add"
                                   placeholder="请输入截至日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否启用</label>
                        <div class="col-sm-6">
                            <input type="checkbox" id="add_status" name="status" class="js-switch form-control"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" id="model_add_submit_btn" class="btn btn-primary add">保存</button>
            </div>
        </div>
    </div>
</div>


<!--模窗 修改-->
<div class="modal  fade" id="modal_modification" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form method="post" th:action="@{/user/adminList/edit}" class="form-horizontal" id="form_modification">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            <input type="text" id="edit_id" name="id" hidden>
                            <input type="password" id="edit_userPwd" name="userPwd"  hidden>
                            用户名</label>
                        <div class="col-sm-8">
                            <input type="text" id="edit_userName" name="userName" disabled="" class="form-control " placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            姓名</label>
                        <div class="col-sm-8">
                            <input type="text" id="edit_realName" name="realName" class="form-control " placeholder="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            性别</label>
                        <div class="col-sm-8  ">
                            <label class="control-label">
                                <input type="radio"  value="1" name="edit_gender" >
                                <span>男</span>
                            </label>&nbsp;&nbsp;

                            <label class="control-label">
                                <input type="radio"  value="0" name="edit_gender">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label phone">
                            手机</label>
                        <div class="col-sm-8">
                            <input type="text" id="edit_userPhone" name="userPhone" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            邮箱</label>
                        <div class="col-sm-8">
                            <input type="email" id="edit_userEmail" name="userEmail" class="form-control " placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            有效期</label>
                        <div class="col-sm-8">
                            <input type="text" id="edit_effectiveDate" name="effectiveDate" class="form-control myData_add " placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否启用</label>
                        <div class="col-sm-6">
                            <input type="checkbox" id="edit_status" name="status" class="js-switch form-control "/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary modification">修改</button>
            </div>
        </div>
    </div>
</div>

<!--模窗 关联-->
<div class="modal  fade" id="modal_allocation" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">分配用户组</h4>
            </div>
            <div class="modal-body">
                <form method="post" th:action="@{/user/adminList/treeCheck_edit}" class="form-horizontal" id="form_allocation">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            用户名</label>
                        <div class="col-sm-8">
                            <input type="text" id="allc_userName" name="name" disabled="" class="form-control" placeholder="用户名未获取">
                        </div>
                    </div>
                    <input type="text" id="allc_id" name="id" hidden>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            分配用户组</label>
                        <div class="col-sm-8">
                            <div class="ibox-content">
                                <div id="treeview_allocation"></div>
                            </div>
                        </div>
                    </div>


                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary allocation">分配</button>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4"
        th:src="@{/static/js/jquery.min.js(v=2.1.4) }"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6"
        th:src="@{/static/js/bootstrap.min.js(v=3.3.6) }"></script>
<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0"
        th:src="@{/static/js/content.js(v=1.0.0) }"></script>
<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js }"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js }"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js }"></script>
<!-- 树形控件 -->
<script src="../../static/js/plugins/treeview/bootstrap-treeview.min.js"
        th:src="@{/static/js/plugins/treeview/bootstrap-treeview.min.js}"></script>
<script src="../../static/public/user/treeCheckBox.js"
        th:src="@{/static/public/user/treeCheckBox.js }"></script>
<!-- 弹出框插件 -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js }"></script>
<!-- 时间控件 -->
<script src="../../static/public/user/bootstrap-datetimepicker/bootstrap-datetimepicker.js"
        th:src="@{/static/public/user/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script src="../../static/public/user/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        th:src="@{/static/public/user/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script src="../../static/public/user/timeAllocation.js"
        th:src="@{/static/public/user/timeAllocation.js }"></script>

<!--滑动按钮-->
<script src="../../static/js/plugins/switchery/switchery.js"
        th:src="@{/static/js/plugins/switchery/switchery.js}"></script>
<!--自定义js---表格操作-->
<script src="../../static/public/exam/tableOperation.js"
        th:src="@{/static/public/exam/tableOperation.js}"></script>
<!--时间控制-->
<script>
    $(function () {
        /*时间控件配置*/
        let object = '.form-control.myData_add';
        timeAllocationForTime(object);
    });
</script>

<!--右上角按钮对的监听处理-->
<script>
    $(document).ready(function () {
        /*删除多个按钮操作*/
        $('.deleteAll').click(function () {
            deleteAllRecords("/owep/user/teacherList/deleteByGroup", '#tb_departments');
        });

        /*添加提交表单*/
        let $add_submit_btn = $('#model_add_submit_btn');
        $add_submit_btn.click(function () {
            // console.log("add submit btn");
            let userName = $("#add_userName").val();
            let realName = $("#add_realName").val();
            let userPwd = $("#add_userPwd").val();
            let userPhone = $("#add_userPhone").val();
            let userEmail = $("#add_userEmail").val();
            let gender = $("input[name='add_gender']:checked").val();
            let effectiveDate = $("#add_effectiveDate").val();
            let status = $("#add_status").val();

            console.log("status:"+status);
            if(status === "on"){
                status = 1;
            }else{
                status = 0;
            }
            let userData ={
                userName:userName,
                realName:realName,
                userPwd:userPwd,
                userPhone:userPhone,
                userEmail:userEmail,
                gender:gender,
                effectiveData:effectiveDate,
                status:status
            };

            console.log(userData);
            let userJson = JSON.stringify(userData);

            $.ajax({
                method:"post",
                url:"/owep/user/teacherList/addTeacher",
                async: "true",
                data:userJson,
                dataType:"text",
                contentType:"application/json",
                success:function(feedback){
                    alert(feedback);
                    window.location.reload();
                },
                error: function (jqXRH) {
                    console.log(jqXRH);
                    alert("添加未成功")
                }
            });
            // $('#form_add').submit();
        });

        /*修改提交表单*/
        $('.modification').click(function () {
            console.log("修改，提交。");
            let id = $("#edit_id").val();
            let userName = $("#edit_userName").val();
            let realName = $("#edit_realName").val();
            let userPwd = $("#edit_userPwd").val();
            let userPhone = $("#edit_userPhone").val();
            let userEmail = $("#edit_userEmail").val();
            let gender = $("input[name='edit_gender']:checked").val();
            let effectiveDate = $("#edit_effectiveDate").val();
            let status = $("#edit_status").val();

            console.log("status:"+status);
            if(status === 1||status ===0){

            }else   if(status === "on"){
                status = 1;
            }else{
                status = 0;
            }
            let userData ={
                id:id,
                userName:userName,
                realName:realName,
                userPwd:userPwd,
                userPhone:userPhone,
                userEmail:userEmail,
                gender:gender,
                effectiveData:effectiveDate,
                status:status
            };
            console.log(userData);
            let userJson = JSON.stringify(userData);
            $.ajax({
                method:"post",
                url:"/owep/user/teacherList/edit",
                async: "true",
                data:userJson,
                dataType:"text",
                contentType:"application/json",
                success:function(feedback){
                    alert(feedback);
                    window.location.reload();
                },
                error: function (jqXRH) {
                    console.log(jqXRH);
                    alert("修改未成功")
                }
            });
            $('#form_modification').submit();
        });


        let $treeview = $('#treeview_allocation');


        /*分配角色*/
        $('.allocation').click(function () {
            let userId = $("#allc_id").val();
            var groupIds = [];
            let checks = $treeview.treeview('getChecked');
            console.log(checks);
            $.each(checks, function (index, item) {
                if (item.parentId!==undefined) {
                    console.log(item.tags);
                    groupIds.push(item.tags);
                }
            });
            // s = JSON.stringify(s);
            if (groupIds.length < 1) {
                alert("至少选择一个");
            } else {
                let result = {userId: userId,groupIds: groupIds};
                console.log(result);
                if (confirm("确定添加这些数据么")) {
                    alert("添加数据:" + result);
                    // window.location.reload();
                    //ajax发送异步请求
                    $.ajax({
                        url:  "/owep/user/teacherList/treeCheck_edit",
                        method: "post",
                        data: JSON.stringify(result),
                        dataType: "text",
                        async: false,
                        contentType: "application/json",
                        success: function (data) {
                            /!*重新加载本页面*!/
                            window.location.reload();
                            alert(data);
                        },
                        error: function (jqXRH) {
                            console.log(jqXRH);
                            alert("设置未同步")
                        }
                    })
                }
            }
            console.log("分配，提交。");
            $('#form_allocation').submit();
        });
        $('.query').click(function () {
            let dataList = new Array('userName','realName');
            queryRecords('form[id="teacher_query"]',dataList);
        });
        /*导出按钮操作*/
        $('.export').click(function () {
            exportRecord("", "管理员信息");
        });
    });
</script>
<!--表单数据控制-->
<script>
    $(function () {
        //1.初始化Table
        TableInit().Init();
    });





    let TableInit = function () {
        let oTableInit = {};
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '/owep/user/teacherList/getTable',       //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                minimumCountColumns: 2,             //最少允许的列数
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                onPostBody: switchInit,
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    visible: false
                }, {
                    field: 'userName',
                    title: '用户名'
                }, {
                    field: 'realName',
                    title: '姓名'
                }, {
                    field: 'userPhone',
                    title: '手机'
                }, {
                    field: 'userEmail',
                    title: '邮箱'
                }, {
                    field: 'status',
                    title: '启用',
                    formatter: addSlideChoiceBox
                }, {
                    field: 'lastAccessTime',
                    title: '最后登陆时间'
                }, {
                    field: 'operate',
                    title: '操作',
                    width: 150,
                    formatter: addFunctionAlty,//表格中增加按钮
                    events: {
                        'click button[title=删除]': function (e, value, row, index) {//动态嵌入按键：删除
                            deleteRecord(e, value, row, index, "/owep/user/teacherList/delete", '#tb_departments');
                        },

                        'click button[title=修改]': function (e, value, row, index) {//动态嵌入按键：编辑
                            //回显数据
                            echoDataForm('form[id="form_modification"]', new Array(
                                'id','userName', 'userPwd','realName', 'userPhone', 'userEmail', 'lastAccessDate', 'status','gender'
                            ), row);
                            $('#modal_modification').modal();
                        },

                        'click button[title=分配用户组]': function (e, value, row, index) {//动态嵌入按键：关系绑定
                            //回显数据
                            $("#allc_userName").val(row.userName);
                            $("#allc_id").val(row.id);
                            getTreeView();

                            $('#modal_allocation').modal();
                        },
                    }
                }]
            });
        };

        let $treeview = $('#treeview_allocation');
        function getTreeView() {
            let url = "/owep/user/teacherList/treeCheck";
            let id = $("#allc_id").val();
            initCheckTree($treeview, url,id);
        }


        function addSlideChoiceBox(value, row, index) {
            if (value == '1') {
                return ' <input type="checkbox" class="js-switch-1 form-control" userId="'+row.id+'" checked/>'
            }
            if (value == '0') {
                return ' <input type="checkbox" class="js-switch-1 form-control" userId="'+row.id+'" />'
            }
        }


        function addFunctionAlty(value, row, index) {
            return '<button id = "+id+" value="'+row.id+'" type = "button" class = "btn btn-white" title="修改" > <i class="glyphicon glyphicon-edit"/> </button>' +
                '<button id = "+id+" value="'+row.id+'" type = "button"  class = "btn btn-white" title="删除"> <i class="glyphicon glyphicon-trash text-danger"/> </button>' +
                '<button id = "+id+" value="'+row.id+'" type = "button"  class = "btn btn-white" title="分配用户组"> <i class="glyphicon glyphicon-share text-success"/> </button>'
                ;
        }

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            let temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };

    /*滑动按钮初始化*/
    function switchInit(value, row, index) {
        //页面如何有多个互动按钮必须需要这些js代码
        let elems = Array.prototype.slice.call($('.js-switch-1'));
        elems.forEach(function (html) {
            /* size: 'normal' 控制大小*/
            let switchery = new Switchery(html);
            html.onchange = function () {
                console.log("user status:"+html.checked);
                let userId = $(this).attr("userId");
                let status;
                if(html.checked==true){
                    alert("用户启用"+userId);
                    status = 1;
                }else{
                    alert("禁用用户"+userId);
                    status = 0;
                }
                let switch_data ={
                    userId: userId,
                    status: status
                };

                //Todo Ajax
                $.ajax({
                    url: "/owep/user/teacherList/switch",
                    method: "get",
                    async: true,
                    data:switch_data,
                    dataType: "text",   //期望服务端返回的数据类型
                    contentType: "application/json",
                    error: function (jqXHR) {
                        swal("同步失败！", "请稍后重试", "error");
                    }
                });
            }
        });

    }


    //页面如何有多个互动按钮必须需要这些js代码
    let switchery;
    let elems = Array.prototype.slice.call($('.js-switch'));
    elems.forEach(function (index,row,html) {
        /* size: 'normal' 控制大小*/
        switchery = new Switchery(html);
        html.onchange = function () {


        }
    });
</script>

</html>